<template>
		<view class="comtent">
			
			
			<image v-bind:class="className" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title" v-on:click="open">{{title}}</text>
			</view>
			<view>
				<view>{{number + 1}}</view>
				<view>{{ok ?'YES' : 'NO'}}</view>
				<view>{{message.split('').reverse().join('')}}</view>
				</view>
				
				<view class="smart-container">
					<input v-model="message"  placeholder="edit me"/>
					<text>Message is:{{message}}</text>
				</view>
				
				<view>
				   
				    <button @click="handleClick('参数1')">按钮1</button>
				    
				    <button @click="handleClick(dynamicParam)">按钮2</button>
				    
				    <button @click="handleClick('参数A', '参数B', $event)">按钮3</button>
				    
				    <button @click="(e) => handleButton('点击事件', e)">带事件对象</button>
				  </view>
				  
				      <view v-if="!raining">今天天气真好</view>
				      <view v-if="raining">下雨天，只能在家呆着了</view>
				      <view v-if="state === 'vue'">state的值是 Vue</view>
				      <view>State is {{state?'vue':'APP'}}</view>
				      <view>
				        <view v-if="state === 'vue'">uni-app</view>
				        <view v-else-if="state === 'html'"> HTML</view>
				        <view v-else> APP</view>
				      </view>
				  
				   <view v-for="item in arr" style="color: #ff0000;">{{item}}</view>
				      <view v-for="(item,index) in 4" style="color: #00ff00;">
				        <view :class="'list-' + index%2">{{index%2}}</view>
				      </view>
				      <view v-for="(value, name, index) in object">
				        {{ index }}. {{ name }}: {{ value }}
				      </view>
				      <view v-for="item in arr" :key="item.id">
				        <view style="color: #0000ff;">{{item.id}}:{{item.name}}</view>
				      </view>
				  
	</view>
</template>

<<script>
export default {
  data() {
    return {
      title: 'Hello',
      dynamicParam: "我是动态参数",
      number: 1,
      className: "smalllogo",
      ok: true,
      message: 'Hello',
      raining: false,
      state: 'vue',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      }
    }
  },
  methods: {
    open() {
      this.title = "opening a new Page";
      this.className = 'logo'
    },
    handleClick(param1, param2, event) {
      console.log("参数1:", param1);
      console.log("参数2:", param2);
      console.log("事件对象:", event);
    },
    handleButton(msg, event) {
      console.log("接收的消息:", msg);
      console.log("事件对象:", event);
      console.log("按钮文本:", event.target.textContent);
    }
  } 
} 
</script>

<style>
.logo{
	height:200rpx;
	width:200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}
.smalllogo{
	height:50rpx;
	width:50rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}
</style>
